<template>
  <div class="min-h-screen relative bg-gradient-to-br from-pink-100 via-purple-100 to-indigo-100 flex items-center justify-center p-6 overflow-hidden">
    <div class="petals" aria-hidden>
      <span v-for="n in 24" :key="n" class="petal"></span>
    </div>
    <div class="relative max-w-3xl w-full rounded-3xl p-10 bg-white/90 shadow-xl border border-pink-100">
      <div class="absolute -top-8 left-1/2 transform -translate-x-1/2">
        <div class="w-40 h-40 rounded-full bg-gradient-to-tr from-pink-300 to-pink-500 shadow-lg flex items-center justify-center text-white text-2xl font-serif">❤</div>
      </div>

      <div class="pt-20 text-center">
        <h2 class="text-4xl font-serif text-pink-600 display-title">生日快乐，{{ payload?.name || '亲爱的' }}！</h2>
        <p class="mt-4 text-gray-700 text-lg max-w-2xl mx-auto whitespace-pre-wrap display-message">{{ payload?.message || '祝你每一天都被温柔以待，愿幸福和微笑常伴你身旁。' }}</p>

        <div class="mt-6">
          <div v-if="payload?.image" class="mb-6 flex justify-center">
            <img :src="payload.image" alt="祝福图片" class="rounded-xl max-h-64 object-contain border" />
          </div>
        </div>

        <div class="mt-2 flex items-center justify-center gap-3">
          <button @click="onShare" class="px-4 py-2 rounded-full bg-pink-600 text-white">分享这个祝福</button>
          <button @click="onEdit" class="px-4 py-2 rounded-full bg-white border">编辑/重新保存</button>
        </div>

        <div v-if="notFound" class="mt-6 text-red-500">未找到祝福内容，或已过期。你可以<a href="/live-tools/birthday" class="text-pink-600 underline">创建新的祝福</a></div>

        <div v-if="copied" class="mt-4 text-sm text-green-600">链接已复制到剪贴板</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()
const key = route.params.key || ''
const payload = ref(null)
const notFound = ref(false)
const copied = ref(false)

async function load() {
  if (!key) { notFound.value = true; return }
  // if preview query present, don't call api, use query values
  const isPreview = route.query?.preview === '1'
  if (isPreview) {
    payload.value = { name: route.query.name || '朋友', message: route.query.message || '' }
    return
  }
  try {
    const res = await fetch(`/api/live/birthday.get?key=${encodeURIComponent(String(key))}`)
    if (!res.ok) {
      notFound.value = true
      return
    }
    const data = await res.json()
    if (data?.status === 'ok') {
      payload.value = data.value
    } else {
      notFound.value = true
    }
  } catch (e) {
    notFound.value = true
  }
}

onMounted(() => { load() })

function onShare() {
  const url = window.location.href
  navigator.clipboard?.writeText(url).then(() => {
    copied.value = true
    setTimeout(() => copied.value = false, 3000)
  }).catch(() => alert('复制失败'))
}

function onEdit() {
  // go back to create page with prefilled query for convenience
  const q = { name: payload?.name || '', message: payload?.message || '' }
  router.push({ path: '/live-tools/birthday', query: q })
}
</script>

<style scoped>
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Poppins:wght@300;400;600&display=swap');

.display-title{ font-family: 'Playfair Display', serif; font-size:2.1rem; letter-spacing:0.6px; text-shadow: 0 6px 18px rgba(214,51,132,0.08) }
.display-message{ font-family: 'Poppins', sans-serif; color:#5b5560 }

/* petals for display page */
.petals{ position:absolute; inset:0; pointer-events:none; overflow:hidden }
.petal{ position:absolute; top:-8%; left:50%; width:12px; height:18px; background:linear-gradient(180deg,#fff5f8,#ffdce8); border-radius:50% 50% 40% 60%; opacity:.95; transform-origin:center; animation:drift 9s linear infinite; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.06)) }
.petal:nth-child(2n){ animation-duration:8s; animation-delay:-3s }
.petal:nth-child(3n){ animation-duration:10s; animation-delay:-5s }

@keyframes drift{
  0%{ transform: translate3d(0,-8vh,0) rotate(0deg); opacity:0 }
  15%{ opacity:1 }
  40%{ transform: translate3d(-25vw,35vh,0) rotate(80deg) }
  70%{ transform: translate3d(20vw,75vh,0) rotate(155deg); opacity:.9 }
  100%{ transform: translate3d(-5vw,110vh,0) rotate(220deg); opacity:0 }
}

/* floating heart badge */
.relative > .w-40{ transform: translateY(-30px) scale(1); transition: transform .8s cubic-bezier(.2,.9,.2,1) }
.relative > .w-40:hover{ transform: translateY(-40px) scale(1.02) }

</style>
